<template>
  <div class="component-box">
    <div class="components-group" v-for="(item, index) in components" :key="item.name">
        <div class="components-group-title" v-on:click="onGroupTitleClick">{{item.name}}</div>
        <div class="component-list">
            <div class="component-item" v-for="(subItem, subIndex) in item.components" :key="subItem.name" 
              draggable="true" @dragstart="onItemDragstart">
                <!-- <img v-bind:src="subItem.icon"/>
                <span>{{subItem.name}}</span> -->
                {{subItem.name}}
            </div>
        </div>
    </div>
  </div> 

</template> 

<script>
export default {
  name: "componentBox",
  props: ['components'],
  data() {
    return {};
  },
  methods: {
    onGroupTitleClick(event){
      
    },
    onItemDragstart(event){
      event.dataTransfer.setData("name", "组件");
      event.dataTransfer.setData("type", "x组件");
    }
  }
};
</script>

<style>
.component-box{
  display: flex;
  flex-direction: column;
  height: 500px;
  text-align: left;
}
.components-group{
  min-height: 20px;
  padding: 8px;
}
.components-group-title{
  height: 20px;
}
.component-list{
  
}
.component-item{
  line-height: 15px;
  margin-top: 3px; 
}
</style>